<template>
    <div class="ossUpLoad">
        <div>ossUpLoad</div>

        <el-upload
            class="avatar-uploader"
            action=""
            :limit="1"
            :multiple="true"
            :http-request="upLoad"
            :before-upload="beforeUpload"
            :on-remove="handleRemove">

            <img v-if="url" :src="url" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
        </el-upload>


        <el-button type="primary" @click="del">删除这个图片</el-button>
        
    </div>
</template>

<script>
    import { Plus } from '@element-plus/icons'
    import {ossSign,ossUpload,ossDel} from '../api/oss/index'
    export default {
        data() {
            return {
                url:"",
            }
        },
        mounted() {

        },
        methods: {
            // 文件上传之前调用做一些拦截限制
            beforeUpload (file) {
                const isJPG = true
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!')
                }
                return isJPG && isLt2M
            },
            handleRemove (file, fileList) {
               
            },
            del(){
                ossDel({
                    url:this.url,
                }).then((res)=>{
                    console.log(res);
                })
            },
            // 上传图片
            upLoad (file) {
                let that = this;
                console.log(file);
                ossSign({}).then((res)=>{
                    console.log(res);
                    if(res.code == 200){
                        let ossInfo = res.data;
                        let fileName =  file.file.name;
                        let suffix = fileName.substr(fileName.lastIndexOf('.'))
                        ossUpload(file.file,ossInfo).then((res)=>{
                            that.url= `${ossInfo.host}/${ossInfo.startsWith}${ossInfo.key}${suffix}`//拼接完整的OSS地址
                        })
                    }
                })
            }
        },
        components: {
            Plus
        }
    }
</script>

<style lang="scss">
    .ossUpLoad{
        width:100%;
        height:100%;
        .uploadBox{
            width:100px;
            height:100px;
            border:1px solid black;
            margin:0 auto;
        }
        .avatar-uploader{
            width:100%;
            height:100%;
        }
        .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
        border-color: #409eff;
        }
        .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
        }
        .avatar-uploader-icon svg {
        margin-top: 74px; /* (178px - 28px) / 2 - 1px */
        }
        .avatar {
        width: 178px;
        height: 178px;
        display: block;
        }
    
    }
</style>